<template>
    <div class="com-container">
        <!-- 饼图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { thousandsFormat } from '@/utils/tools';

@Component({
    name: 'PieChart',
})
// 饼图
export default class PieChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }
    mounted() {
        this.initChart();
        // window.addEventListener('resize', this.screenAdapter);
    }

    initChart() {
        let _this = this;
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            tooltip: {
                trigger: 'item',
                confine: true,
                position: 'top',
                backgroundColor: 'rgba(255,255,255,0.8)',
                borderColor: 'rgba(0,0,0,0.1)',
                textStyle: {
                    color: 'rgba(0,0,0,.65)',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
            },
            // grid: {
            //     // top: '0%',
            //     right: '30%',
            //     left: '30%',
            //     // bottom: '8%',
            // },
            legend: {
                show: true,
                orient: 'vertical',
                icon: 'circle',
                left: '70%',
                top: '35%',
                // bottom: '20%',
                // itemHeight: 8, // 修改icon图形大小
                // itemWidth: 8,
                // textStyle: {
                //     fontSize: 12,
                //     fontWeight: 500,
                //     color: 'rgba(0,0,0,.65)',
                // },
                z: 1001,
                // selectedMode: false,
                // tooltip: {
                //     show: true,
                //     // trigger: 'item',
                //     // formatter: function(param) {
                //     //     let data = _this.data.data.find(item => item.name === param.name);
                //     //     return (
                //     //         // param.marker +
                //     //         // '&nbsp' +
                //     //         data.name + '&nbsp' + (data?.instructionNum || '0') + '笔' + '&nbsp' + (data?.formatValue || '')
                //     //     );
                //     // },
                //     backgroundColor: 'rgba(255,255,255,0.8)',
                //     borderColor: 'rgba(0,0,0,0.1)',
                //     textStyle: {
                //         color: 'black',
                //     },
                //     extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);',
                // },
            },
            color: ['#95f204', '#d9001b', '#69FFED', '#96A0FF', '#F47B8F'],
            series: [
                {
                    type: 'pie',
                    // roseType: 'radius',
                    radius: '91%',
                    center: ['50%', '50%'],
                    data: [],
                    avoidLabelOverlap: true,
                    stillShowZeroSum: false,
                    minShowLabelAngle: 0.01,
                    labelLine: {
                        show: false,
                    },
                    label: {
                        show: false,
                    },
                    top: '10%',
                },
            ],
        };
        this.chartInstance.setOption(initOption);
        // let that = this;
        // this.chartInstance.on('legendselectchanged', function (params) {
        //     // 前面配置项没定义selected，需先定义，否则找不到对象会报错
        //     const dataOption = {
        //         legend: {
        //             selected: {},
        //         },
        //     };
        //     dataOption.legend.selected[params.name] = true; // 相当于取消点击事件
        //     that.chartInstance.setOption(dataOption);
        // });
    }
    updateChart(e) {
        let _this = this;
        const dataOption = { series: [{ data: this.handleShow(e.data) }], color: e.color };
        this.chartInstance.setOption(dataOption);
    }

    dispose() {
        this.chartInstance.dispose(); // 销毁实例
        this.initChart();
    }

    screenAdapter() {
        // const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // // 分辨率变化图表配置
        // const adapterOption = {
        //     axisLabel: {
        //         textStyle: {
        //             fontSize: titleFontSize,
        //         },
        //     },
        //     // 柱状条目
        //     series: [
        //         {
        //             barWidth: titleFontSize,
        //         },
        //     ],
        // };
        // this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }

    // 根据数据动态显示label和labelLine
    handleShow(arr) {
        arr.forEach(item => {
            item.labelLine = {
                smooth: 0.2,
                length: 3,
                length2: 5,
            };
        });
        return arr;
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
